<template>
  <view class="container">
    <!--input列表 -->
    <view class="input-box">
      <view class="section">
        <text>盘点日期</text>
        <text>{{ panDianData.pandianTime }}</text>
      </view>
      <view class="section">
        <text>盘点人</text>
        <text>{{ panDianData.name }}</text>
      </view>
      <view class="section">
        <text>盘点详情</text>
        <text>{{ panDianData.reportDetail }}</text>
      </view>
      <view class="section">
        <text>原有数量</text>
        <text>{{ panDianData.originalNum }}</text>
      </view>
      <view class="section">
        <text>盘点数量</text>
        <text>{{ panDianData.pdNum }}</text>
      </view>
      <view class="section">
        <text>丢失数量</text>
        <text>{{ panDianData.lostNum }}</text>
      </view>
      <view class="section">
        <text>未识别数量</text>
        <text>{{panDianData.unrecognizedNum}}</text>
      </view>
      <view class="section">
        <text>未识别耳标</text>
        <text>{{panDianData.unrecognizedTags}}</text>
      </view>
    <uni-card is-full>
			<text>丢失羊只图片</text>
		</uni-card>

    </view>
    <view
      v-if="!lostSheepList.length"
      class="empty">
      <view class="img">
        <image src="@/static/images/icon/sheep.png" />
      </view>
      <view class="txt">
        您还没有丢失的羊哦~
      </view>
    </view>
    <view v-if="lostSheepList.length>0" class="prod-show">
      <block v-for="(sheep, index) in lostSheepList" :key="index">
		  <uni-swipe-action>
		  	<uni-swipe-action-item
		  		:right-options="sheetParam.options2"
		  		:show="sheetParam.isOpened"
		  		:auto-close="false"
				@click='updatSheepStatus(sheep,$event)'
		  	>
		  		<view class="content-box">
		  			<text class="content-text">
        <view class="show-item" :data-sheepId="sheep.id">
          <view class="more-prod-pic">
            <img-show :src="sheep.imgUrl" :class-list="['more-pic']" @click="imgPreview(sheep.imgUrl)" />
          </view>
          <view class="prod-text-right" @click="">
            <view class="prod-text more">
             羊耳标： {{ sheep.dzId }}
            </view>
            <view class="prod-info">
             皮下耳标： {{ sheep.pxId }}
            </view>
			<view class="prod-info">
			 状态：
			 <uni-tag v-if="sheep.status==='0'" :inverted="true" text="正常" type="success"  size='small'/>
			 <uni-tag v-if="sheep.status==='1'" :inverted="true" text="已丢失" type="error" size='small' />
			 <uni-tag v-if="sheep.status==='2'" :inverted="true" text='已销售'  size='small' />
       <uni-tag v-if="sheep.status==='3'" :inverted="true" text='已死亡'  size='small' />
			</view>

          </view>
        </view>
</text>
		  		</view>
		  	</uni-swipe-action-item>
		  </uni-swipe-action>
      </block>
    </view>
	<view>
		<uni-popup ref="messagepopup" type="message">
			<uni-popup-message :type="sheetParam.msgType" :message="sheetParam.messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
  </view>
</template>

<script setup>
import { reactive } from 'vue';

const lostSheepList = ref([]);
	const panDianData = reactive({
		pandianTime:'',
		name:'',
		originalNum:'',
		pdNum:'',
		lostNum:'',
		unrecognizedNum:'',
		unrecognizedTags:'',
    reportDetail:''
	})
  	const messagepopup = ref(null)
	const sheetParam = reactive({
		msgType:'',
		messageText:'',
		isOpened:false,
		options2:[
      {
      	text: '已丢失',
      	style: {
      		backgroundColor: '#18bc37'
      	},
      	status:'1'
      },
			{
				text: '已销售',
				style: {
					backgroundColor: '#8f939c'
				},
				status:'2'
			},
			{
				text: '已死亡',
				style: {
					backgroundColor: '#F56C6C'
				},
				status:'3'
			}
		]
	})
	const imgPreview=(url)=>{
		url=util.checkFileUrl(url)
		 uni.previewImage({
			urls: [url]
		})
	}


	const updatSheepStatus=(item,e)=>{
		let param={
			id:item.id,
			status:e.content.status
		}
		http
		  .request({
			url: "/app/api/updateSheepStatus",
			method: "POST",
			data:param
		  })
		  .then(({ data,code }) => {
			  if(code===200){
				  initPanDianData(panDianData.id)
				  sheetParam.msgType = 'success'
				  sheetParam.messageText = '操作成功!'
				  messagepopup.value.open()
				  if(sheetParam.isOpened==='none'){
					sheetParam.isOpened= 'false'
				  }else{
					sheetParam.isOpened= 'none'
				  }
			  }else{
				  sheetParam.msgType = 'error'
				  sheetParam.messageText = '操作失败!'
				  messagepopup.value.open()
				  if(sheetParam.isOpened==='none'){
					sheetParam.isOpened= 'false'
				  }else{
					sheetParam.isOpened= 'none'
				  }
			  }
		  })
	}
	//初始化数据
	const initPanDianData = (reportId)=>{
		http
		  .request({
			url: "/app/api/getPandianReport/" + reportId,
			method: "GET",
		  })
		  .then(({ data }) => {
			panDianData.pandianTime = data.pandianTime
			panDianData.name = data.name;
			panDianData.originalNum = data.originalNum;
			panDianData.pdNum = data.pdNum;
			panDianData.lostNum = data.lostNum;
			panDianData.unrecognizedNum = data.unrecognizedNum;
      panDianData.unrecognizedTags = data.unrecognizedTags;
      panDianData.reportDetail = data.reportDetail;
			lostSheepList.value = data.lostSheepList;
			uni.hideLoading();
		  });
	}
onLoad((options) => {
  if (options.reportId) {
    uni.showLoading();
initPanDianData(options.reportId)

  } else {
    initCityData(provinceId.value, cityId.value, areaId.value);
  }
});

const provArray = ref([]);
const valArr = ref([0, 0, 0]);
const initCityData = (provinceId, cityId, areaId) => {
  uni.showLoading();
  http
    .request({
      url: "/p/area/listByPid",
      method: "GET",
      data: {
        pid: 0,
      },
    })
    .then(({ data }) => {
      provArray.value = data;
      if (provinceId) {
        for (const index in data) {
          if (data[index].areaId === provinceId) {
            valArr.value = [parseInt(index), valArr.value[1], valArr.value[2]];
          }
        }
      }
      getCityArray(provinceId || data[0].areaId, cityId, areaId);
      uni.hideLoading();
    });
};

let indexArr = [18, 0, 0];
const areaArray = ref([]);
const cityArray = ref([]);
/**
 * 滑动事件
 */
const bindChange = (e) => {
  // 判断滑动的是第几个column
  const val = e.detail.value;
  // 若省份column做了滑动则定位到地级市和区县第一位
  if (indexArr[0] != val[0]) {
    val[1] = 0;
    val[2] = 0; // 更新数据
    // 获取地级市数据
    getCityArray(provArray.value[val[0]].areaId);
  } else {
    // 若省份column未做滑动，地级市做了滑动则定位区县第一位
    if (indexArr[1] != val[1]) {
      val[2] = 0; // 更新数据
      getAreaArray(cityArray.value[val[1]].areaId); // 获取区县数据
    }
  }
  indexArr = val;
  valArr.value = [val[0], val[1], val[2]];
  province.value = provArray.value[valArr.value[0]].areaName;
  city.value = cityArray.value[valArr.value[1]].areaName;
  area.value = areaArray.value[valArr.value[2]].areaName;
  provinceId.value = provArray.value[valArr.value[0]].areaId;
  cityId.value = cityArray.value[valArr.value[1]].areaId;
  areaId.value = areaArray.value[valArr.value[2]].areaId;
};

let t = 0;
let moveY = 200;
const show = ref("");
/**
 * 移动按钮点击事件
 */
const translate = () => {
  if (t == 0) {
    moveY = 0;
    show.value = true;
    t = 1;
  } else {
    moveY = 200;
    show.value = false;
    t = 0;
  }
  animationEvents(moveY, show.value);
};

/**
 * 隐藏弹窗浮层
 */
const hiddenFloatView = () => {
  moveY = 200;
  show.value = false;
  t = 0;
  animationEvents(moveY, show.value);
};

const animation = ref("");
/**
 * 动画事件
 */
const animationEvents = (moveY, showParam) => {
  animation.value = uni.createAnimation({
    transformOrigin: "50% 50%",
    duration: 400,
    timingFunction: "ease",
    delay: 0,
  });
  animation.value.translateY(moveY + "vh").step();
  animation.value = animation.value.export();
  show.value = showParam;
};

/**
 * 根据省份ID获取 城市数据
 */
const getCityArray = (provinceId, cityId, areaId) => {
  http
    .request({
      url: "/p/area/listByPid",
      method: "GET",
      data: {
        pid: provinceId,
      },
    })
    .then(({ data }) => {
      cityArray.value = data;
      if (cityId) {
        for (const index in data) {
          if (data[index].areaId == cityId) {
            valArr.value = [valArr.value[0], parseInt(index), valArr.value[2]];
          }
        }
      }
      getAreaArray(cityId || data[0].areaId, areaId);
      uni.hideLoading();
    });
};

/**
 * 根据城市ID获取 区数据
 */
const getAreaArray = (cityId, areaId) => {
  http
    .request({
      url: "/p/area/listByPid",
      method: "GET",
      data: {
        pid: cityId,
      },
    })
    .then(({ data }) => {
      areaArray.value = data;
      if (areaId) {
        for (const _index in data) {
          if (data[_index].areaId == areaId) {
            valArr.value = [valArr.value[0], valArr.value[1], parseInt(_index)];
          }
        }
        indexArr = valArr.value;
      } else {
        province.value = provArray.value[valArr.value[0]].areaName;
        city.value = cityArray.value[valArr.value[1]].areaName;
        area.value = areaArray.value[valArr.value[2]].areaName;
        provinceId.value = provArray.value[valArr.value[0]].areaId;
        cityId.value = cityArray.value[valArr.value[1]].areaId;
        areaId.value = areaArray.value[valArr.value[2]].areaId;
      }
      uni.hideLoading();
    });
};

/**
 * 保存地址
 */
const onSaveAddr = () => {
  const receiverParam = receiver.value;
  const mobileParam = mobile.value;
  const addrParam = addr.value;

  if (!receiverParam.trim()) {
    receiver.value = "";
    uni.showToast({
      title: "请输入收货人姓名",
      icon: "none",
    });
    return;
  }

  if (!mobileParam) {
    uni.showToast({
      title: "请输入手机号码",
      icon: "none",
    });
    return;
  }

  if (mobileParam.length != 11) {
    uni.showToast({
      title: "请输入正确的手机号码",
      icon: "none",
    });
    return;
  }

  if (!addrParam.trim()) {
    receiver.value = "";
    uni.showToast({
      title: "请输入详细地址",
      icon: "none",
    });
    return;
  }

  uni.showLoading();
  let url = "/p/address/addAddr";
  let method = "POST";

  if (addrId.value != 0) {
    url = "/p/address/updateAddr";
    method = "PUT";
  } // 添加或修改地址

  http
    .request({
      url,
      method,
      data: {
        receiver: receiver.value,
        mobile: mobile.value,
        addr: addr.value,
        province: province.value,
        provinceId: provinceId.value,
        city: city.value,
        cityId: cityId.value,
        areaId: areaId.value,
        area: area.value,
        userType: 0,
        addrId: addrId.value,
      },
    })
    .then(() => {
      uni.hideLoading();
      uni.navigateBack({
        delta: 1,
      });
    });
};
const onReceiverInput = (e) => {
  receiver.value = e.detail.value;
};
const onMobileInput = (e) => {
  mobile.value = e.detail.value;
};
const onAddrInput = (e) => {
  addr.value = e.detail.value;
};

/**
 * 删除配送地址
 */
const onDeleteAddr = () => {
  uni.showModal({
    title: "",
    content: "确定要删除此收货地址吗？",
    confirmColor: "#eb2444",

    success(res) {
      if (res.confirm) {
        const addrIdParam = addrId.value;
        uni.showLoading();
        http
          .request({
            url: "/p/address/deleteAddr/" + addrIdParam,
            method: "DELETE",
          })
          .then(() => {
            uni.hideLoading();
            uni.navigateBack({
              delta: 1,
            });
          });
      }
    },
  });
};
</script>

<style scoped lang="scss">
@use "./pandianReportDetail.scss";
</style>
